<template>
  <view class="container">
    <view class="remindBox">
      <view class="remindBox_top">
        <van-cell title="选择宠物" is-link :value="petValue" @click="petShow = true" />
        <van-cell title="提醒时间" is-link :value="remindValue" @click="timeShow = true" />
        <!-- 输入框 -->
        <van-field v-if="tagName == '自定义'" :rules="[{ required: true, message: '请填写用户名' }]" :value="attribute"
          :label="tagName" :placeholder="'请输入'+tagName+'名字'" input-align="right" @input="InputClick($event,i)" />
        <van-cell title="重复间隔" is-link :value="timeValue + intervalValue" @click="resetAdd" />
      </view>
      <view class="remindBox_bottom">
        <button @click="establishButton">创建提醒</button>
      </view>
      <van-popup :show="petShow" round position="bottom" custom-style="height: 60%" @close="petClose">
        <van-picker title="选择宠物" show-toolbar :columns="petList" @confirm="petConfirm" @cancel="petShow = false">
        </van-picker>
      </van-popup>
      <van-popup :show="timeShow" round position="bottom" custom-style="height: 60%" @close="timeClose">
        <van-datetime-picker :value="currentDate" type="datetime" @confirm="timeConfirm" @cancel="timeShow = false"
          :min-date="minDate" />
      </van-popup>
      <van-popup :show="resetShow" overlay-style="opacity: .2;" round position="bottom" custom-style="height: 60%"
        @close="resetClose">
        <!-- <van-picker title="提醒" show-toolbar :columns="columns" @confirm="resetConfirm" @cancel="resetShow = false">
        </van-picker> -->
        <view class="resetBox">
          <van-tabs v-model="active" @change="timeChange" color="rgba(253, 211, 56, 1)" line-width="24">
            <van-tab title="天">
              <van-picker ref="day" :columns="columns1" @change="dayChange" @cancel="resetShow = false" />
            </van-tab>
            <van-tab title="月">
              <van-picker ref="month" :columns="columns2" @change="monthChange" @cancel="resetShow = false" />
            </van-tab>
          </van-tabs>

          <view class="resetBox_text">
            <text>隔</text>
            <text v-if="resetCurrent == 0">天</text>
            <text v-else>月</text>
          </view>
        </view>

      </van-popup>

      <!-- <van-popup :show="resetTimeShow" round position="bottom" custom-style="height: 60%" @close="resetTimeClose">
        <van-datetime-picker v-model="currentDate" type="datehour" title="选择年月日小时" :min-date="resetTimeMinDate"
            @confirm="resetTimeConfirm" @cancel="resetTimeShow = false" />
            
      </van-popup> -->

    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'

  import {
    getLabelDetail,
    addEstablish
  } from '@/api/remind.js'

  import {
    RecordUserId
  } from '@/api/user.js'

  export default {
    data() {
      return {
        active: 0,
        tagId: '',
        addmubmit: false,
        // 编辑
        editShow: false,
        editList: [],
        dayIndex: '0',
        monthIndex: '0',

        petValue: '',
        remindValue: '',
        timeValue: '1',
        intervalValue: '天',
        // 宠物弹框
        petShow: false,
        petList: [],
        petId: '',
        petIdList: [],

        // 时间弹框
        timeShow: false,
        timeMaxDate: '',
        minDate: new Date().getTime(),
        currentDate: new Date().getTime(),

        // 间隔
        resetCurrent: 0,
        resetShow: false,
        resetTimeShow: false,
        columns1: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
          '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'
        ],
        columns2: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        tagName: '',
        attribute: '',
      };
    },
    computed: {
      ...mapGetters('m_user', ['isLogin'])
    },
    watch: {
      isLogin: {
        handler: function(newV, oldV) {
          const that = this
          // console.log(newV)
          if (newV == true) {
            this.getRecordUserList()
          }
        },
        deep: true
      },
    },
    onLoad(option) {
      // console.log(option)
      if (option.remindId) {
        this.editShow = true
        this.editId = option.remindId
      }
      this.addmubmit = false
      this.tagId = option.id
      this.getRecordUserList(option.id)
      // this.getLabelDetailList(option.id)

      uni.setNavigationBarTitle({
        title: option.name
      })
      this.tagName = option.name
    },
    methods: {
      // 获取宠物列表
      getRecordUserList(id) {
        // this.$refs.tabs.resize();
        var myDate = new Date()
        RecordUserId().then(res => {
          res.data.forEach(item => {
            this.petList.push(item.productName)
            this.petIdList.push(item.id)
          })
          this.petValue = this.petList[0]
          this.petId = this.petIdList[0]
          // console.log(this.petList)
        })
        // 编辑
        if (this.editShow) {

          this.editList = wx.getStorageSync('remindItem')
          wx.removeStorageSync('remindItem')
          // console.log(this.editList)
          // 宠物
          this.petValue = this.editList.animal.productName
          this.petId = this.editList.animal.id
          // 时间
          this.remindValue = this.editList.time
          this.timeCurrentDate = this.editList.time
          // 月和天
          if (this.editList.mode == 0) {
            this.intervalValue = '天'
            // this.dayIndex =  this.editList.intervals - 1
            // console.log(this.dayIndex)
          } else if (this.editList.mode == 1) {
            this.intervalValue = '月'
            // this.monthIndex = this.editList.intervals - 1
            // console.log(this.monthIndex)
          }

          // 重复间隔
          this.timeValue = this.editList.intervals
        } else {
          this.remindValue = this.$util.formatDateTime(new Date()).substr(0, 16)
        }
      },
      InputClick(e, i) {
        this.attribute = e.detail

      },
      // 宠物
      petConfirm(e) {

        this.petId = this.petIdList[e.detail.index]
        // console.log(value.detail.value, index)
        this.petValue = e.detail.value
        this.petShow = false
      },
      // onChange(picker, value, index) {
      //   console.log(value, index)
      // },
      // onCancel() {
      //   console.log(value, index)
      // },
      petClose() {
        this.petShow = false
      },
      //数据转化
      formatNumber(n) {
        var n = n.toString()
        return n[1] ? n : '0' + n
      },

      // 时间
      timeConfirm(e) {
        console.log(e.detail)
        this.timeShow = false
        // this.$util.formatDateTime(new Date())
        this.remindValue = this.$util.formatDateTime(new Date(e.detail)).substr(0, 16)
      },
      timeClose() {
        this.timeShow = false
      },

      // 重复
      timeChange(e) {
        this.resetCurrent = e.detail.index

        if (this.resetCurrent == 0) {
          this.timeValue = this.$refs.day.getValues()[0];
          // console.log( JSON.stringify(this.$refs.day.getValues()))
          this.intervalValue = '天'
        } else if (this.resetCurrent == 1) {
          this.timeValue = this.$refs.month.getValues()[0];
          // console.log(JSON.stringify(this.$refs.month.getValues()))
          this.intervalValue = '月'
        }
      },
      resetAdd() {
        this.resetShow = true
      },

      resetClose() {
        this.resetShow = false
      },
      // 1

      dayChange(e) {
        this.timeValue = e.detail.value
        this.resetCurrent = 0
        this.intervalValue = '天'
      },
      // 2
      monthChange(e) {
        this.timeValue = e.detail.value
        this.resetCurrent = 1
        this.intervalValue = '月'
      },

      // 创建按钮
      establishButton() {
        if (this.editShow) {
          var establishQuery = {
            id: this.editId,
            tagId: this.tagId,
            animalId: this.petId,
            time: this.remindValue,
            mode: this.resetCurrent,
            intervals: this.timeValue,
            attribute: this.attribute ? this.attribute : '',
          }
          addEstablish(establishQuery).then(res => {
            this.addmubmit = true
            this.$util.Tips({
              title: '修改成功'
            })
          }).catch(res => {
            this.$util.Tips({
              title: res
            })
          })

        } else {
          var establishQuery = {
            tagId: this.tagId,
            animalId: this.petId,
            time: this.remindValue,
            mode: this.resetCurrent,
            intervals: this.timeValue,
            attribute: this.attribute ? this.attribute : ''
          }
          addEstablish(establishQuery).then(res => {
            this.addmubmit = true
            this.$util.Tips({
              title: '创建成功'
            })
          }).catch(res => {
            this.$util.Tips({
              title: res
            })
          })
        }
        uni.navigateBack({

        })
      }

    }
  }
</script>

<style lang="scss">
  /deep/.van-tab {
    color: rgba(61, 61, 61, .5);
  }

  /deep/.van-tabs__line {

    // width: 12rpx;
    // transform: translateX(68rpx) !important;

  }

  /deep/.van-tab--active {

    font-weight: 600;
    color: rgba(61, 61, 61, 1);
  }

  .remindBox {
    padding: 0 24rpx;

    /deep/.van-cell {
      padding: 36rpx 0;
      border-bottom: 1rpx solid rgba(241, 241, 241, 1) !important;
    }

    /deep/.van-cell__title {
      font-size: 30rpx;
      color: rgba(61, 61, 61, .75);
    }

    /deep/.van-cell__value {
      font-size: 30rpx;
      color: rgba(61, 61, 61, 1);
    }

    /deep/.van-cell:after {
      border: none;
    }

    /deep/.van-picker__title {
      color: rgba(0, 0, 0, .5) !important;
    }

    /deep/.van-picker__confirm {
      color: rgb(0, 0, 0) !important;
    }

    /deep/.van-picker__cancel {
      color: rgb(0, 0, 0) !important;
    }

    .remindBox_bottom {
      button {
        width: 704rpx;
        height: 96rpx;
        position: fixed;
        left: 50%;
        bottom: 50rpx;
        transform: translate(-50%);
        background-color: rgba(253, 211, 56, 1);
        border-radius: 48rpx;
        font-size: 36rpx;
        color: rgba(61, 61, 61, 1);
        text-align: center;
        line-height: 96rpx;
      }
    }

    .resetBox {
      position: relative;

      .resetBox_text {
        display: flex;
        justify-content: center;
        position: absolute;
        left: 50%;
        top: 58%;
        transform: translate(-50%, -50%);

        text {
          font-size: 36rpx;
        }

        text:last-child {
          margin-left: 60rpx;
        }
      }

      .resetBox_top {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 30rpx 0;

        button {
          width: 100rpx;
          height: 100rpx;
          border-radius: 30rpx;
          background-color: rgba(253, 211, 56, 1);
          text-align: center;
          line-height: 100rpx;
          font-size: 36rpx;
          padding: 0;
          margin: 0;
        }
      }

    }
  }
</style>
